import React, { useEffect, useState, Key } from 'react';
import { Button, Form, Input, Table, Card, message, Tooltip } from 'antd';
import { SearchOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons"
import { useNavigate } from 'react-router-dom';

//引入api中请求的方法
import { getHosSetListRequest, deleteHosSetFromIdRequest, batchDeleteHosRequest } from '@/api/hospital/hospitalSet';

// 引入类型限制
import type { getHosSetListRecordsType, getHosSetListItemsType } from '@/api/hospital/model/hospitalSetTypes';
import type { searchHosFinishPraType } from './types';

import style from "./index.module.css"


export default function HospitalSet() {

  //使用编程式路由导航hook  ()
  const navigate = useNavigate()   //hook只能写在组件最外层或者自定义hook里面。所以把编程式路由导航跳转放到外面去放在最外层组件下。


  const [tableData, setTableData] = useState<getHosSetListRecordsType>([])

  //定义current(当前页码)的state[useState的泛型根据我们传入的参数推论出来了]
  const [current, setCurrent] = useState(1)
  //定义total(总个数)的state
  const [total, setTotal] = useState(0)
  //定义pageSize(每页的数量)的state
  const [pageSize, setPageSize] = useState(3)
  //定义isLoading(table是否加载中)
  const [isLoading, setIsLoading] = useState(false);
  const [fieldValue, setFieldValue] = useState<searchHosFinishPraType>({})
  //定义一个state,专门用来触发useEffect的执行,重新加载
  const [reRender, setReRender] = useState(true)
  //定义一个控制批量删除按钮的一个状态
  const [isSelect, setIsSelect] = useState(true);  //默认值是true，表示是禁用状态。
  //定义一个 保存批量选中的ids的状态
  const [batchSelectIds, setBatchSelectIds] = useState<Key[]>([]);


  //当组件加载的时候,开始请求分页列表的数据
  useEffect(() => {
    //在请求开始之前,设置isLoading为true
    setIsLoading(true)

    //封装一个请求函数才可以,记得后续调用
    const getHosSetList = async () => {
      const result = await getHosSetListRequest({  //有两个是可选的可先不传
        page: current,
        limit: pageSize,
        ...fieldValue     //展开这个对象，得到两个输入框中分别输入的值（hosname和hoscode）
      })
      // console.log(result, "result")

      setTableData(result.records)
      // 把得到的结果中 数据的总长度设置给state
      setTotal(result.total)

      //请求完成后要把isLoading修改为false 
      setIsLoading(false)
    }
    getHosSetList()
  }, [current, pageSize, fieldValue, reRender])

  // 表格字段
  const columns = [
    {
      title: '序号',
      width: 60,
      dataIndex: 'index',
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname'
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode'
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl'
    },
    {
      title: '签名',
      dataIndex: 'signKey'
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
    },
    {
      title: '操作',
      width: 120,
      fixed: "right" as "right",
      dataIndex: 'do',

      render(_: any, data: getHosSetListItemsType) {   //columns中最后一个对象的render渲染的是当前这条数据的两个按钮。所以render中的第二个参数可以接收到当前这条数据的所有信息（data），把id从data中解构出来，然后把id这个变量添加到点击事件中路由跳转的路径后面。（使用反引号）。（params路由传参方式）。
        const { id } = data;
        return (
          <div>
            <Tooltip title="修改医院">
              <Button
                type='primary'
                icon={<EditOutlined />}
                className={style.mr}
                onClick={() => { navigate(`/syt/hospital/updatehosset/${id}`) }}   //点击编辑按钮，跳转路由，在跳转路由的时候把id加在地址中传过去。路由跳转后要立即发送请求把当前这条数据的id通过地址传给后端，获取该id所对应的医院信息数据，来渲染 ‘修改医院’页面。
              ></Button>
            </Tooltip>
            <Tooltip title="删除医院">
              <Button
                type='primary' danger
                icon={<DeleteOutlined />}
                onClick={deleteSingleDataHandle(id)}
              ></Button>
            </Tooltip>
          </div >
        )
      }
    }
  ];

  //事件回调函数
  //1.点击页码以后的事件回调函数
  const pageChangeHandle = (current: number, pageSize: number) => {
    //参数1page:当前点击的页码  参数2 pageSize:每页条数
    //点击以后给state设置page和pageSize的值
    setCurrent(current)
    setPageSize(pageSize)
  }


  // 2.点击查询提交表单的事件回调函数。参数是收集当前表单输入的值组成的对象。
  const searchHosFinishHandle = (fieldValue: searchHosFinishPraType) => {
    setFieldValue(fieldValue)
  }


  // 3.添加医院事件回调函数
  const addHosHandle = () => {
    //编程式路由导航跳转
    navigate("/syt/hospital/addhosset")
  }

  // 4.点击删除单个数据
  const deleteSingleDataHandle = (id: number) => {
    return async () => {
      //调用删除的接口
      await deleteHosSetFromIdRequest(id)

      //删除数据后重新渲染页面
      setReRender(!reRender)

      message.success("删除医院成功")
    }
  }

  // 5.批量删除按钮事件回调函数 
  const batchDeleteHandle = async () => {
    //发送批量删除请求
    await batchDeleteHosRequest(batchSelectIds)

    message.success("批量删除成功");

    //重新渲染
    setReRender(!reRender)

    //把批量删除按钮恢复
    setIsSelect(!isSelect)

  }


  return (
    <div className={style.outer}>
      <Card>
        <Form
          name="basic"
          wrapperCol={{ span: 30 }}
          layout='inline'
          onFinish={searchHosFinishHandle}
        >
          <Form.Item
            name="hosname"
          >
            <Input placeholder="医院名称" />
          </Form.Item>

          <Form.Item
            name="hoscode"
          >
            <Input placeholder='医院编号' />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="default" htmlType="reset">
              清空
            </Button>
          </Form.Item>
        </Form>

        <div className={style.mt}>
          <Button type='primary' onClick={addHosHandle} className={style.mr}>添加</Button>
          <Button type="primary" danger disabled={isSelect} onClick={batchDeleteHandle}>批量删除</Button>
        </div>

        <Table
          className={style.mt}
          columns={columns}
          dataSource={tableData}
          scroll={{ x: 1100 }}
          bordered
          rowKey="id"
          loading={isLoading}
          rowSelection={{   //选框
            onChange(ids: Key[]) {     //分页、排序、筛选变化时触发  接收两个数组作为参数，第一个数组的值是被选中的数据的id，第二个数组的值是一个个的对象，对象中是该条数据的详细信息。
              //设置控制批量删除按钮state的状态
              setIsSelect(!ids.length)   //将数组的长度取反并转为布尔值，如果长度为0则转为true, 如果不为0则转为false表示可用状态。通过数组的长度，判断是否有选中数据。

              //当选项框被修改的时候,实时的修改保存所有被选中id的状态
              setBatchSelectIds(ids)
            }
          }}
          pagination={{
            //页码的配置：当前页码
            current,
            //总数据的数量
            total,
            //每页条数
            pageSize,
            //展示更改每页条数的选项(默认total大于50条的时候开启)
            pageSizeOptions: [3, 8, 15],
            //是否直接开启更新每页条数的选项
            showSizeChanger: true,

            showTotal(total) {
              return `总共有${total}条数据`
            },

            onChange: pageChangeHandle
          }}
        />
      </Card>
    </div>
  )
}
